<template>
  <div class="app">
    <div class="detail" :style="{background: 'url('+info.poi_back_pic_url+')'}">
      <div class="header">
        <img :src="info.picUrl" alt="">
        <h3>{{info.name}}</h3>
        <div class="coll" v-if="isCollect" @click="cancel_collect(info)" style="color:red">❤</div>
        <div class="coll" v-else  @click="collect(info)">❤</div>
      </div>
      <van-tabs v-model="active"  background="transparent" color="white" line-width="20" title-inactive-color="white" title-active-color="white" @tabs-bottom-bar-width="20" width="100" >
        <van-tab title="搜索"></van-tab>
        <van-tab title="点餐" ></van-tab>
        <van-tab title="评论4.6"></van-tab>
        <van-tab title="搜索" ></van-tab>
      </van-tabs>
      <div class="van-ellipsis">公告：{{info.bulletin}}</div>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    props:{
        info:{type:Object,default:()=>{
            return {}
        }},
        shopinfo:{type:Object,default:()=>{
            return {}
        }}
    },
    data(){
        return{
            active:1
        }
    },
    computed:{
    ...mapState(['collectList']),
    ...mapGetters([]),
    isCollect(){ 
      var index = this.collectList.findIndex((item)=>{
        return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
      })
      return index !== -1
    },
    },
    methods: {
    // ...mapMutations(['collect','cancel_collect']),
    ...mapActions(['request_fav','request_unfav']),
    collect(info){
      this.request_fav(info)
    },
    cancel_collect(info){
      this.request_unfav(info)
    }
    },
}
</script>

<style lang="scss" scoped>
.detail{
  box-sizing: border-box;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  .header{
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 50px 0;
    color: white;
    img{
      width: 30px;
      height: 30px;
      border-radius: 15px;
      margin-right: 10px;
    }
    .coll{
      font-size: 20px;
    }
  }
  .van-ellipsis{
    color: white;  
    padding: 20px;
  } 

 
}
</style>